<template>
	<view class="u_parse">
		<!-- <u-parse :content="useInterest"></u-parse> -->
		<rich-text :nodes="useInterest" class="wrapper"></rich-text>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
	export default {
		data() {
			return {
				useInterest: {},
				cardType: ''
			};
		},
		onLoad(options) {
			console.log(options,'options>>>')
			this.cardType = options.cardType;
			this.getUser();
		},
		methods: {
			getUser() {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this;
				uni.request({
					url: baseUrl + `/customer/web/equity_card_type/getCardType/${this.cardType}`,
					method: "POST",
					header: {
						Authorization: token
					},
					success(res) {
							that.useInterest = res.data.data.detailedDescription;
							that.useInterest = that.formatRichText(that.useInterest)
					},
				});
			},
			//解析富文本方法
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/<p>/gi, '<br>');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
	};
</script>

<style>
	.u_parse {
		padding: 0 28rpx 32rpx;
	}
	
	.wrapper {
	  white-space: pre-wrap;
	  /* padding: 1rem; */
	}
	.wrapper p {
	  min-height: 1em;
	}
	p {
	    display: block;
	    margin-block-start: 0em;
	    margin-block-end: 0em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	}
	/* 或者 */
	.wrapper p:empty {
	  height: 1em;
	}
</style>